import React, { useEffect, useState } from "react";
import "./style.css";
import axios from "axios";



const App = () => {
  const [questionList, setQuestionList] = useState([]);
  const [show, setShow] = useState(false);
  const [value,  setValue] = useState("哈哈哈哈")
  const handlePublic = () => {
    // 关闭
    setShow(false)
    // input的值
    console.log(value)
    // 追加数据
    setQuestionList([...questionList, { title: value }])
    // questionList.push({ title: value })
  }
  // 请求列表数据
  useEffect(() => {
    axios.get('/api/list').then(resp => {
      console.log(resp.data.data)
      setQuestionList(resp.data.data)
    })
  }, [])

  // 受控组件： 指表单类元素 受React状态控制的组件 就死受控组件
  // React举个例子： <input value={value} onChange={(e) => setChanage(e.target.value)}/>
  // Vue举个例子：   <input v-model="value"/>
  return (
    <div>
      <h1>问题列表</h1>
      <button
        onClick={() => {
          setShow(true);
        }}
      >
        添加问题
      </button>
      <ul>
        {questionList.map((v, i) => {
          return <li key={i}>{v.title}</li>;
        })}
      </ul>

      {show && (
        <div className="dialog">
          <div className="content">
            {/* 受控组件 */}
            <input type="text" value={value} onChange={e => setValue(e.target.value)}/>
            <h2>{ value }</h2>
            <button onClick={() => handlePublic()}>发布问题</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;
